<template>
  <template v-for="item of list">
    <el-menu-item
      v-if="!item.children || !item.children.length || (item.children.length && !isRecursive)"
      :index="item.meta.fullPath"
      :key="item.meta.fullPath"
    >
      <template #title>
        <i :class="item.meta.iconClass"></i>
        <span>{{ item.name }}</span>
      </template>
    </el-menu-item>
    <el-sub-menu v-else :key="item.meta.fullPath" :index="item.meta.fullPath">
      <template #title>
        <i :class="item.meta.iconClass"></i>
        <span>{{ item.name }}</span>
      </template>
      <wrapper-menu-item :navList="item.children"></wrapper-menu-item>
    </el-sub-menu>
  </template>
</template>

<script>
  // 指定组件名，递归调用组件本身时有用
  export default {
    name: 'WrapperMenuItem'
  }
  // 可以直接在setup中写 const name = 'WrapperMenuItem';
</script>

<script setup>
  import {computed} from 'vue';
  import {useStore} from 'vuex';
  const store = useStore();
  const props = defineProps({
    navList: Array,
    // 是否需要递归显示导航菜单
    isRecursive: {
      type: Boolean,
      default: true
    }
  });
  const list = computed(() =>
    props.navList.filter(item => item.meta.isNav && item.meta.authority.includes(store.state.userInfo.role))
  );
</script>
